import React, { useContext, useEffect, useState } from 'react';
import { Modal, StyleSheet, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { Image, ScrollView, Text, View } from 'native-base';
import { CommonStyle } from '../../../../common/commonStyle.ts';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import Swiper from 'react-native-swiper';
import { FasterImageView } from '@candlefinance/faster-image';
import HomeRequest from '../../../../request/homeRequest.ts';
import { useReactive } from 'ahooks';
import { useSelector } from 'react-redux';
import { RootState } from '../../../../redux/store.ts';
import { MerchantProductContext } from '../index.tsx';

interface IMerchantInformationProps {
  merchantInfo: IObtainMerchantListRes;
}
interface IState {
  activityList: IObtainMerchantActivityRes[];
  bannerList: IObtainMerchantBannerRes[];
  hasCameras: boolean;
}
const MerchantInformation: React.FC<IMerchantInformationProps> = ({ merchantInfo }) => {
  const [visible, setVisible] = useState(false);
  const btnInformation = useSelector((state: RootState) => state.btnInformation);
  const state = useReactive<IState>({ activityList: [], bannerList: [], hasCameras: false });
  const { collect, onCollectionChange } = useContext(MerchantProductContext)!;

  useEffect(() => {
    fetchObtainMerchantActivity();
    fetchObtainMerchantBanner();
    fetchObtainHasMerchantSurveillanceCameras();
  }, []);

  // 获得商户活动
  const fetchObtainMerchantActivity = () => {
    HomeRequest.ObtainMerchantActivity({ businessId: merchantInfo.id }).then((res) => {
      state.activityList = res.data;
    });
  };

  // 获得商户banner
  const fetchObtainMerchantBanner = () => {
    HomeRequest.ObtainMerchantBanner({ businessId: merchantInfo.id, serverClassifyIds: btnInformation?.classifyIds }).then((res) => {
      state.bannerList = res.data;
    });
  };

  // 商户是否有摄像头
  const fetchObtainHasMerchantSurveillanceCameras = () => {
    HomeRequest.ObtainHasMerchantSurveillanceCameras({ businessId: merchantInfo.id }).then((res) => {
      state.hasCameras = res.data > 0;
    });
  };

  return (
    <React.Fragment>
      <View style={styles.content}>
        <View flex={1}>
          <View flexDirection={'row'} alignItems={'center'}>
            <Text fontWeight={'bold'} fontSize={16}>
              {merchantInfo.name}
            </Text>
            {state.hasCameras && (
              <TouchableOpacity>
                <Image style={{ width: 30, height: 30, marginLeft: 10 }} source={require('../../../../assets/images/home/monitor.png')} alt={''} />
              </TouchableOpacity>
            )}
          </View>
          {merchantInfo.introduce && (
            <TouchableOpacity style={{ marginTop: 8 }} onPress={() => setVisible(true)}>
              <Text fontSize={12} numberOfLines={1} color={CommonStyle.deepGrey}>
                {merchantInfo.introduce}
              </Text>
            </TouchableOpacity>
          )}
        </View>
        <Image style={{ width: 60, height: 60 }} resizeMode={'contain'} source={{ uri: merchantInfo.logo }} alt={''} />
      </View>
      {state.activityList.map((item) => {
        return (
          <TouchableOpacity style={styles.activity} key={item.activeId}>
            <View w={'100%'} flexDirection={'row'} borderWidth={1} borderColor={'#f94d26'} borderRadius={4} overflow={'hidden'} marginRight={2}>
              <Text fontWeight={'bold'} color={'#f94d26'} fontStyle={'oblique'} bg={'#fedadb'} paddingX={1}>
                活动
              </Text>
              <Text flex={1} paddingX={1} bg={'#feeef1'} color={'#f94d26'} fontSize={12} lineHeight={20}>
                {item.activeName}
              </Text>
            </View>
          </TouchableOpacity>
        );
      })}
      {state.bannerList.length > 0 && (
        <View paddingX={4} paddingY={1} width={'100%'} height={150} borderRadius={8} overflow={'hidden'} marginBottom={2}>
          <Swiper loadMinimal loadMinimalSize={1} removeClippedSubviews={true} loop={true} height={150} showsButtons={false} activeDotColor={CommonStyle.mainColor} paginationStyle={{ bottom: 10 }} style={{ borderRadius: 8, overflow: 'hidden' }}>
            {state.bannerList.map((item) => {
              return (
                <FasterImageView
                  key={item.id}
                  style={{ width: '100%', height: '100%' }}
                  source={{
                    url: item.value,
                    transitionDuration: 0.3,
                    cachePolicy: 'discWithCacheControl',
                    borderRadius: 8,
                    showActivityIndicator: true,
                    resizeMode: 'cover',
                  }}
                />
              );
            })}
          </Swiper>
        </View>
      )}
      <View marginX={4} paddingY={2} borderRadius={4} marginBottom={3} bg={collect ? CommonStyle.mainColor : '#f3eeee'} width={100}>
        <TouchableOpacity onPress={() => onCollectionChange(!collect)}>
          <Image style={{ height: 18 }} resizeMode={'contain'} source={{ uri: 'https://pic.kanglailab.com/common/my_collect.png' }} alt={''} />
        </TouchableOpacity>
      </View>
      <Modal transparent={true} visible={visible} animationType="fade" onRequestClose={() => setVisible(false)}>
        <Touchable style={styles.overlay} onPress={() => setVisible(false)}>
          <ScrollView style={styles.container}>
            <Text> {merchantInfo.introduce}</Text>
          </ScrollView>
        </Touchable>
      </Modal>
    </React.Fragment>
  );
};

const styles = StyleSheet.create({
  content: { flexDirection: 'row', backgroundColor: 'white', padding: 16, paddingVertical: 8, justifyContent: 'space-between', alignItems: 'center' },
  activity: { padding: 16, paddingVertical: 8, backgroundColor: 'white', flexDirection: 'row', flexWrap: 'wrap' },
  overlay: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.4)' },
  container: { flex: 1, backgroundColor: 'white', borderRadius: 10, padding: 16, width: '90%', maxHeight: '60%' },
});

export default MerchantInformation;
